<template>
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
		<el-breadcrumb-item>课程管理</el-breadcrumb-item>
		<el-breadcrumb-item>课程订单管理</el-breadcrumb-item>
	</el-breadcrumb>
	

	<!-- 行内表单 -->
	<el-form :inline="true" :model="queryInfo" class="demo-form-inline" style="padding: 15px 0;">
		<el-form-item label="用户名">
			<el-input v-model="queryInfo.sysUser.username" placeholder="请输入用户名" clearable @clear="query" />
		</el-form-item>
		<el-form-item label="课程名称">
			<el-input v-model="queryInfo.course.courseName" placeholder="请输入课程名称" clearable @clear="query" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="query">搜索</el-button>
			<el-button type="danger" @click="batchRemove">批量删除</el-button>
		</el-form-item>
	</el-form>
	
	
	<!-- 数据表格 -->
	<el-table ref="multipleTableRef" :data="dataList" style="width: 100%" @selection-change="handleSelectionChange" border>
		<el-table-column type="selection" width="50" />
		<el-table-column property="id" label="ID" width="55" >
			<template #default="scope">
				{{scope.$index+1}}
			</template>
		</el-table-column>
		<el-table-column property="sysUser.username" label="用户名" />
		<el-table-column property="course.courseName" label="课程名" />
		<el-table-column property="orderTime" label="下单时间" />
		<el-table-column fixed="right" label="操作" width="220">
			<template #default="scope">
				<el-button size="small" type="danger" @click="remove(scope.row.id)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	
	<!-- 分页区域 -->
	<el-pagination v-model:current-page="queryInfo.pageNum" v-model:page-size="queryInfo.pageSize"
		:page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="total"
		@size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
	

<script setup>
		import {getCurrentInstance,reactive} from 'vue';
		import {ref,onMounted} from 'vue';
		import {ElMessage,ElMessageBox} from 'element-plus';
		import {Plus} from '@element-plus/icons-vue';
		import { cloneDeep } from 'lodash-es';
		import qs from 'qs';
		//查询数据的函数
		const axios = getCurrentInstance().appContext.config.globalProperties.axios;

		const total = ref(0);
	
		/* 查询信息对象 */
		const queryInfo = reactive({
			sysUser:{
				username:''
			},
			course:{
				courseName:''
			},
			pageSize:10,
			pageNum:1
		})
		//当前页数据
		const dataList = ref([])
		//存储复选数据
		const multipleSelection = ref([])
		const handleSelectionChange = (val) => {
			multipleSelection.value = val.map(item => {
				return item.id
			})
			console.log(multipleSelection.value);
		}
		

		const query = () => {
			axios.get(`courseOrder/page`, {
				params: queryInfo,
				paramsSerializer: (params) => {
     				return qs.stringify(params, {
       					allowDots: true, // 启用点号格式
        				skipNulls: true  // 可选：跳过空值
     		 	});
  		  	}
				})
				.then((resp) => {
					if (resp.code === 200) {
						dataList.value = resp.data.list;
						total.value = resp.data.total;
					} else {
						ElMessage.error(resp.message)
					}
		
				})
		};
		
		//组件加载完毕，查询数据
		onMounted(() => {
			query();
		});
		//每页显示条目数改变
		const handleSizeChange = (val) => {
			queryInfo.pageSize = val;
			query();
		};
		//页码改变
		const handleCurrentChange = (val) => {
			queryInfo.pageNum = val;
			query();
		};
		
		//单个删除
		const remove = (id) => {
			ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?','Warning', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			).then(() => {
				axios.delete(`courseOrder/delete/${id}`)
					.then(resp => {
						if (resp.code == 200) {
							ElMessage.success(resp.message)
						} else {
							ElMessage.error(resp.message)
						}
						query();
						dialogFormVisible.value = false
					})
			}).catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})
		}
		
		//批量删除
		const batchRemove = () => {
			ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?','Warning', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			).then(() => {
				axios.delete('courseOrder/delete', {
						params: {
							ids: multipleSelection.value.join(',')
						}
					})
					.then(resp => {
						if (resp.code == 200) {
							ElMessage.success(resp.message)
						} else {
							ElMessage.error(resp.message)
						}
						query();
					})
			}).catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})
		}
</script>

<style scoped>
	.el-pagination {
		margin-top: 15px;
	}
	.el-breadcrumb {
			height: 20px;
			font-size: 15px;
			border-bottom: 1px solid #eee;
			padding-bottom: 15px;
		}
	
		.demo-form-inline .el-input {
			--el-input-width: 220px;
		}
	
		.demo-form-inline .el-select {
			--el-select-width: 220px;
		}

</style>